<template>
    <div class="chat-right-left-wrap-wrapper flex-column">
        <div class="chat-right-wrap-bottom-search">
            <a-cascader
                v-model:value="state.projectCode"
                :options="treeData"
                :field-names="{
                    children: 'children',
                    label: 'name',
                    value: 'code',
                }"
                :show-search="{ filter }"
                placeholder="选择项目名称"
                style="width: 100%"
                @change="handleCascaderChange"
            >
                <template #displayRender="{ labels }">
                    <a-tooltip>
                        {{ labels.slice(1).join(' / ') }}
                        <template #title>
                            {{ labels.join(' / ') }}
                        </template>
                    </a-tooltip>
                </template>
            </a-cascader>
        </div>

        <div class="chat-right-wrap-bottom-search">
            <a-input-search v-model:value="queryParams.keyword" placeholder="输入员工名称" allow-clear enter-button @search="handleSearch()" />
        </div>

        <div class="chat-right-wrap-bottom flex-1" ref="scrollRef">
            <div
                class="chat-right-wrap-list flex"
                :class="{
                    active: state.employeeId === item.id,
                }"
                v-for="(item, index) in list"
                :key="index"
                @click="handleSelect(item)"
            >
                <a-space>
                    <a-avatar :size="45" :src="item.avatar" v-if="item.avatar" />
                    <a-avatar :size="45" v-else>
                        <template #icon><UserOutlined /></template>
                    </a-avatar>
                    <div class="flex-1">
                        <div class="chat-right-wrap-list-remark" :title="item.projectNames">{{ item.name }}</div>
                        <!-- <div class="chat-right-wrap-list-nickname line-1" :title="item.projectNames">
                        {{ item.projectNames }}
                    </div> -->
                    </div>
                </a-space>
            </div>

            <div class="flex justify-center loading-wrap" v-if="loading">
                <loading-outlined />
                数据加载中...
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, onMounted } from 'vue';
    import { UserOutlined, LoadingOutlined } from '@ant-design/icons-vue';
    import type { ShowSearchType } from 'ant-design-vue/es/cascader';
    import { queryProjectTree } from '@/api/list/project-list';
    import { isNotEmpty } from '@/utils/is';
    import { findTree } from 'xe-utils';
    import { getPermitUserList } from '@/api/smss/chat';

    const emits = defineEmits(['update:select']);

    const treeData = ref<any[]>([]);

    const scrollRef = ref<any>(null);
    const list = ref([]);
    const loading = ref(false);

    const state = reactive<{
        projectCode: string[];
        projectName: string;
        current: number;
        employeeId: string;
    }>({
        projectCode: [],
        projectName: '',
        current: 1,
        employeeId: '',
    });

    const queryParams = {
        keyword: '',
        times: [],
    };

    const filter: ShowSearchType['filter'] = (inputValue, path) => {
        return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    };

    const queryTreeData = () => {
        queryProjectTree().then(res => {
            treeData.value = [res.data as any];
            if (!isNotEmpty(state.projectCode)) {
                const select = findTree([res.data], item => item.type === 'dept' && !isNotEmpty(item.children));
                if (select.item.code) {
                    state.projectCode = select.nodes.map(item => item.code);
                    state.projectName = select.item.name;

                    handleSearch();
                }
            } else {
                const select = findTree([res.data], item => item.code === state.projectCode[state.projectCode.length - 1]);
                if (isNotEmpty(select)) {
                    state.projectName = select.item.name;
                    state.projectCode = select.nodes.map(item => item.code);
                    console.log(select);

                    handleSearch();
                }
            }
        });
    };

    const handleCascaderChange = (value: any, selectedOptions: any) => {
        state.projectCode = value;

        const select = selectedOptions[selectedOptions.length - 1];
        if (select.type === 'dept' && select.children.length === 0) {
            state.projectName = select.name;

            handleSearch();
        }
    };

    onMounted(() => {
        queryTreeData();
    });

    const handleSearch = () => {
        loading.value = true;
        getPermitUserList(state.projectCode.at(-1), queryParams.keyword)
            .then(res => {
                list.value = res.data;
                if (isNotEmpty(list.value)) {
                    if (isNotEmpty(state.employeeId)) {
                        const item = list.value.find(item => item.id === state.employeeId);
                        handleSelect(isNotEmpty(item) ? item : list.value[0]);
                    } else {
                        handleSelect(list.value[0]);
                    }
                }
            })
            .finally(() => {
                loading.value = false;
            });
    };

    const handleSelect = item => {
        state.employeeId = item.id;
        emits('update:select', item);
    };
</script>

<style lang="less" scoped>
    .chat-right-left-wrap-wrapper {
        height: 100%;
        background-color: #fff;

        .chat-right-wrap-top {
            padding: 6px 10px 6px 10px;
            border-right: 1px solid #d9d9d9;
        }

        .chat-right-wrap-bottom-tabs,
        .chat-right-wrap-bottom-search {
            padding: 10px;
        }

        .chat-right-wrap-bottom-tabs {
            padding-bottom: 0;
        }

        .chat-right-wrap-bottom {
            overflow-y: auto;
            padding: 10px;

            .chat-right-wrap-list {
                padding: 5px;
                margin-bottom: 5px;
                border-left: 3px solid #fff;
                cursor: pointer;

                &.active,
                &:hover {
                    background: #effaff;
                    border-left: 3px solid #1c90ff;
                }
                & > .flex-1 {
                    margin-left: 10px;
                    .chat-right-wrap-list-remark {
                        line-height: 20px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 15px;
                    }

                    .chat-right-wrap-list-nickname {
                        color: #999;
                        font-size: 13px;
                        margin-top: 6px;
                    }
                }
            }
        }
    }
</style>
